<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin:0;padding:0; list-style: none;text-align: center;}
			#tab,#tab2{width: 600px;margin:50px auto 0;}
			#title{overflow: hidden;}
			#title span{float: left;width:199px;height: 30px;border-right: 1px solid #EAEAEA;line-height: 30px;font-size: 22px;color:#333333;background: #FCFCFC;cursor:pointer;}
			#content{height: 200px;overflow: hidden;background:-webkit-linear-gradient(top,#38A4F1,#465A6A);}
			#content li{height:200px;line-height: 200px;font-size: 80px;display: none;}
			#title .active{color:#FFFFFF;background: #0AA770;}
			#content .show{display: block;}
		</style>
	</head>
	<body>
		<div id="tab">
		        <h1 id="title">
		            <span class="active">标题一</span>
		            <span>标题二</span>
		            <span>标题三</span>
		        </h1>
		        <ul id="content">
		            <li class="show">内容一</li>
		            <li>内容二</li>
		            <li>内容三</li>
		        </ul>
	   </div>
	    <script type="text/javascript">
	    	window.onload = function(){
	    		function Tab(title_tab){
	    			this.oDiv = document.getElementById(title_tab);
	    			this.spans = document.getElementsByTagName("span");
	    			this.lis = document.getElementsByTagName("li");
	    			var _this = this;
	    			for (var i = 0; i < this.spans.length; i++) {
	    				this.spans[i].onclick = function(){
	    					_this.clickTab(this);
	    				}
	    			}
	    		}
	    		
	    		Tab.prototype.clickTab = function(obj){
	    			for (var i = 0; i < this.spans.length; i++) {
	    				if (this.spans[i] == obj) {
	    					this.spans[i].className = "active";
	    					this.lis[i].className = "show";
	    				} else{
	    					this.spans[i].className = "";
	    					this.lis[i].className = "";
	    				}
	    			}
	    		}
	    		var tab1 = new Tab('tab');
	    	}
	    </script>
	</body>
</html>
